<template name="screenBar2">
	<view class="screenBarCnt" >
		<view class="screenBarBox"   :style="{position:psn,top:toTop+'px'}">
			<view :class="['screenItem',tabIndex[0]?'active':'']" data-type="area" data-index="0" @tap="setPopType">
				<text>{{areaName}}</text>
				<text class="iconfont icon-unfold"></text>
			</view>
			<view :class="['screenItem',tabIndex[1]?'active':'']" data-type="class" data-index="1" @tap="setPopType">
				<text>{{className}}</text>
				<text class="iconfont icon-unfold"></text>
			</view>
			<view :class="['screenItem',tabIndex[2]?'active':'']" data-type="rank" data-index="2" @tap="setPopType">
				<text>{{rankArr[rankType]}}</text>
				<text class="iconfont icon-unfold"></text>
			</view>
			<view :class="['screenItem',tabIndex[3]?'active':'']" data-type="screen" data-index="3" @tap="setPopType">
				<text>筛选</text>
				<text class="iconfont icon-shaixuan"></text>
			</view>
		</view>
		<areaPopup ref="area" :show="show" v-on:change="change" :scHeight="scHeight"  ></areaPopup>
		<classPopup ref="class" :show="show" v-on:change="change" :scHeight="scHeight"  ></classPopup>
		<rankPopup ref="rank" :show="show" v-on:change="change" :scHeight="scHeight"  ></rankPopup>
		<screenPopup ref="screen" :show="show" v-on:change="change" :scHeight="scHeight"  ></screenPopup>
	</view>

</template>


<script>
	import areaPopup from "@/components/screenBar2/areaPopup2.vue";
	import classPopup from "@/components/screenBar2/classPopup2.vue";
	import rankPopup from "@/components/screenBar2/rankPopup2.vue";
	import screenPopup from "@/components/screenBar2/screenPopup2.vue";
	export default {
		components:{areaPopup,classPopup,rankPopup,screenPopup},
		name: 'screenBar2', //组件名称
		// 传递参数
		props: {
			top: {
				type: Number,
				default: 0
			},
			cntHeight: {
				type: Number,
				default: 0
			},
			isFiexd:{
				type:Boolean,
				default:false
			}
		},
		// 组件参数
		data() {
			return {
				data1: 'value1',
				toTop:0,
				psn:'relative',
				show:false,
				nowPopup:'area',
				scHeight:0,
				tabIndex:[false,false,false,false],
				rankArr:['智能排序','销量最多','评分最高','价格最高','价格最低','离我最近'],
				rankType:0,
				areaName:'商圈',
				className:'课程分类'
			}
		},
		// 组件方法
		methods: {
			// 点击筛选条，页面向上滑动至筛选条停靠在顶部
			toPageScroll() {
				
				if(this.top< this.cntHeight){
					// 调用index滚动页面
					uni.$emit("toPageScroll2");
					// 延时300ms打开pop
					setTimeout(()=>{
						this.togglePopup(this.nowPopup);
					},500)
				}else{
					// 直接打开pop
					this.togglePopup(this.nowPopup)
				}
				
			},
			// 切换显示pop层
			togglePopup(type) {
				if(this.scHeight==0){
					this.scHeight=uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.upx2px(78)
				}
				if(this.show){
					this.$refs[type].close()
				}else{
					this.$refs[type].open()
				}
				
			},
			// 设置pop的类型
			setPopType(e){
				let tapIndex=parseInt(e.currentTarget.dataset.index);
				this.tabIndex=[false,false,false,false];
				if(!this.show){			//如果当前没有打开pop
					this.nowPopup=e.currentTarget.dataset.type;			//设置要打开的pop类型
					this.tabIndex[tapIndex]=true
				}else{
					this.tabIndex[tapIndex]=false
				}
				this.toPageScroll()
			},
			change(showVal){
				this.show=showVal.show;
				if(!this.show){
					this.tabIndex=[false,false,false,false];
				}
			},
		},
		watch:{
			isFiexd(newVal){
				if(newVal){
					this.psn="fixed";
					this.toTop=uni.getSystemInfoSync().statusBarHeight+uni.upx2px(90)
				}else{
					this.psn="relative";
					this.toTop=0
				}
			},
			
		},
		created() {
			setTimeout(()=>{
				let query = uni.createSelectorQuery().in(this);
				query.select('.screenBarBox').boundingClientRect(data => {
					getApp().globalData.G_SCREENBAR=data
				}).exec()
			},100)
			
			uni.$on("rankChange2",payload=>{
				this.rankType=payload.type
			})
			uni.$on("changeArea2",payload=>{
				this.areaName=payload.areaName

			})
			uni.$on("changeStreet2",payload=>{
				this.areaName=payload.streetName
			})
			uni.$on("classChange2",payload=>{
				this.className=payload.cname
			})
			
		}
	}
</script>
<style lang="less">
	@import "../../common/public.less";
	.screenBarCnt{
		height: 78upx;
	}
	.screenBarBox {
		height: 78upx;
		width: 100%;
		display: flex;
		position: relative;
		left: 0;
		z-index: 988;
		background-color: #FFFFFF;
		.screenItem {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			text {
				font-size: 26upx;
				color: #595959;
				margin-right: 8upx;
			}
			.iconfont{
				font-size: 28upx;
				line-height: 24upx;
				transition: all 0.3s;
			}

			.shaixuan {
				width: 20upx;
				height: 24upx;
			}
		}
		.active{
			text{
				color: @color-m;
			}
			
			.iconfont{
				transform: rotate(180deg);
				
			}
			
		}
	}
	
</style>
